import { count, log } from "console";
import { Component, ReactNode } from "react";

// 1. 事件
// 2. 表单
// 3. 生命周期
// 4. axios
export default class App extends Component {
  state = {
    count: 100,
  };

  render(): ReactNode {
    return (
      <>
        <div style={{width: 200, height: 200, backgroundColor: "red"}}
        onClick={(e)=>{
          console.log("点击了外层");
          e.stopPropagation()
        }}>
          外层
          <div style={{width: 100, height: 100, backgroundColor: "yellow"}}
          
          onClick={(e)=>{
            console.log("点击了中间层");
            e.stopPropagation()
          }}

          >
            中间层
            <div style={{width: 50, height: 50, backgroundColor: "green"}}
            
            onClick={(e)=>{
              console.log("点击了内层");
              e.stopPropagation();//阻止冒泡,事件传播
              // 先捕获，再冒泡
              //捕获从外到内，冒泡从内到外
            }}

            >内层</div>
          </div>
        </div>
      </>
    );
  }
}
